<template>
	<view class="coupons">

		<view class="content">
			<view class="clock">
				<xwCountDown class="" :is-day="false" :tip-text="' '" :day-text="' '" :hour-text="':'"
					:minute-text="':'" :second-text="' '" :datatime="datatime"></xwCountDown>后不可领
			</view>

			<view class="li">
				<view class="l">
					<view class="name">硬核多连券</view>
					<view class="info">
						<view class="num">
							<text class="unit">￥</text>
							89
							<text class="unit">券后</text>
							<text class="del">￥99</text>
						</view>
					</view>
				</view>
				<view class="r">
					<view class="count">
						<text class="unit">￥</text>10
					</view>
					<view class="get">领券</view>
				</view>
			</view>
		</view>
		<view class="btn" @click="$emit('close')"></view>
	</view>
</template>

<script>
	import xwCountDown from '@/components/xw-CountDown'
	export default {
		components: {
			xwCountDown
		},
		data() {
			return {
				datatime: 1606881600, // 获取截止时间
			};
		},
	}
</script>

<style scoped lang="scss">
	.coupons {
		width: 80vw;
		height: 60vh;
		background: url('@/static/images/newhone/ttlqbg.png') no-repeat;
		background-size: 100% 100%;
		position: relative;
		padding: 15vh 0;
		box-sizing: border-box;

		.content {
			height: 400rpx;

			.clock {
				position: absolute;
				left: 50%;
				top: 10vh;
				transform: translate(-50%, 0%);
			}

			.li {
				width: 80%;
				height: 143rpx;
				margin:0 10vw 0 9.3vw;
				display: flex;
				align-items: center;
				justify-content: center;
				background-image: url('@/static/images/newhone/ttlqlibg.png');
				background-size: 100%;
				background-repeat: no-repeat;
				.l {
					width: 70%;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					font-size: 30rpx;
					padding-left: 30rpx;
					.name {
						font-weight: 600;
						margin-bottom: 10rpx;
					}

					.info {
						font-size: 32rpx;

						.num {
							font-weight: 600;
							
						}

						.unit {
							font-size: 12rpx;
							font-weight: 400;
							margin:0 5rpx;
						}
						.del{
							font-size: 12rpx;
							margin-left: 20rpx;
							position: relative;
							color: #aaa;
							&::before{
								width: 105%;
								height: 2rpx;
								background-color: #aaa;
								color: #aaa;
								content: '';
								position: absolute;
								left: 50%;
								top: 50%;
								transform: translate(-50%,-50%);
							}
						}
					}
				}

				.r {
					flex: 1;
					text-align: center;
					color: #fff;
					.count {
						font-weight: 600;
						font-size: 32rpx;
						.unit {
							font-size: 12rpx;
						}
					}

					.get {
						width: 120rpx;
						height: 40rpx;
						text-align: center;
						line-height: 40rpx;
						border-radius: 5rpx;	
						color: #fff;
						font-size: 12rpx;
						margin: 10rpx auto 0;
						background-image: url('@/static/images/newhone/ttlqbtn2.png');
						background-size: 100%;
						background-repeat: no-repeat;
					
					}
				}
			}
		}

		.btn {
			width: 385rpx;
			height: 90rpx;
			margin: 20rpx auto;
			background-image: url('@/static/images/newhone/ttlqbtn.png');
			background-size: 100%;
			background-repeat: no-repeat;
			position: absolute;
			left: 50%;
			bottom: 10rpx;
			transform: translate(-50%,0%);
		}
	}
</style>
